<!-- 我的资料 -->
<template>
	<view class="flex-col page">
		<view class="back-w" style="">
			<view class="u-m-l-10" @click="Back()">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="f-w-l">
				我的资料</view>
		</view>
		<view class="flex-col group_3" style="margin-top: 90rpx;">
			<view class="flex-col section_2">
				<view class="flex-col group_4">
					<!-- 头像 -->
					<view class="justify-between group_5">
						<text class="text_3">头像</text>
						<view class="picter">
							<image :src="iconpic"  class="image_999" @click="chooseImages">
							</image>
						</view>
					</view>
					<!-- ID -->
					<view class="justify-between group_6">
						<text class="text_4">ID</text>
						<text class="text_5">{{list.id}}</text>
					</view>
					<!-- 昵称 -->
					<view class="justify-between group_7">
						<text class="text_6">昵称</text>
						<text class="text_7">
							<input type="text" placeholder="请输入昵称" v-model="list.name"
								style="display: flex;  width: 100%;">
						</text>
					</view>
				</view>
				<!-- 性别 -->
				<view class="justify-between group_8">
					<text class="text_8">性别</text>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input">{{ array[index]}}</view>
					</picker>
				</view>
				<!-- 生日 -->
				<view class="flex-col group_9">
					<view class="justify-between group_10">
						<text class="text_10">生日</text>
						<picker mode="date" :value="time" @change="bindTimeChange">
							<view class="uni-input2">
								<text class="text_11">{{time || getTime}}</text>
								<image class="img-wh " :src="$IMG_URL+'index/goright.png'" />
							</view>
						</picker>
					</view>
					<view class="justify-between group_11">
						<text class="text_12">联系方式</text>
						<text class="text_13">{{list.phone}}</text>
					</view>
				</view>
			</view>
			<view class="flex-col items-center button"><text class="text_14" @click="saveInfo">保存</text></view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				index: 0,
				nickname: '',
				array: [
					'男',
					'女'

				],
				time: '',
				list: '',
				fileList: [{
					url: ''
				}],
				imageStyles: {
					'width': 60,
					'height': 60,
					'border': {
						'radius': '50%'
					}
				},
				uploadloading: false,
				iconpic: ''
			};
		},
		created() {
			this.getinfo()

		},

		computed: {
			...mapGetters(['userInfo']),
			getTime() {
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				mm = mm < 10 ? '0' + mm : mm
				let dd = new Date().getDate();
				dd = dd < 10 ? '0' + dd : dd
				let timer = yy + '-' + mm + "-" + dd
				return timer
			}
		},
		methods: {
			bigclose() {
				this.uploadbigShow = false;
			},
			chooseImages() {
				// 上传图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.uploadloading = true;
						// console.log(res.tempFilePaths, 'res');
						if (res.tempFilePaths.length > 0) {
							res.tempFilePaths.map(item => {
								this.upload(item)
							})
						}

						if (this.proarr[this.uploadIndex].issueMedia.length == 9) {
							this.uploadShow = false
						}
					}
				});
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						// console.log(beforePage)
						if (this.userInfo.roleType == '3' || uni.getStorageSync('userInfo').roleType == '3') {
							beforePage.$vm.$refs.mine.getinfo();
						} else if (this.userInfo.roleType == '2' || uni.getStorageSync('userInfo').roleType ==
							'2') {
							beforePage.$vm.$refs.Foreman.getlist();
						}


					}

				})
			},
			success(file) {
				console.log('dianji')
				this.fileList.push({
					url: file.url
				})
				// console.log(this.fileList);
			},
			select(e) {
				console.log('dianji')
				if (e.tempFilePaths.length > 0) {
					e.tempFilePaths.map(item => {
						this.upload(item)
					})
				}

			},
			upload(url) {
				// console.log(url);
				uni.uploadFile({
					url: this.$API_URL + '/app3/upload/uploadOne',
					filePath: url,
					name: 'file',
					success: (res) => {
						res = JSON.parse(res.data)
						if (res.code == 200) {
							this.$emit('success', {
								url: res.data
							});
							this.iconpic = res.data
							this.list.address = res.data;
							this.$u.toast('头像上传成功');
						} else {
							this.$u.toast(res.msg);
						}

					}
				});

			},
			getinfo() {
				this.$http('common.getInfo').then(res => {
					console.log(res)
					if (res.code == 200) {
						this.list = res.data;
						this.time = this.list.birth;
						// this.nickname = this.list.name;
						this.iconpic = res.data.address;
						// this.fileList[0].url = res.data.address;
						this.index = res.data.sex*1;
						console.log(res.data);
					} else {
						console.log(res.msg)
					}
				}).catch(err => {

				})
			},
			saveInfo() {
				console.log(this.list.address)
				this.$http('ours.updateinfo', {
					address: this.list.address,
					birth: this.time,
					name: this.list.name,
					sex: this.index
				}).then(res => {
					if (res.code == 200) {
						// // 保存并返回上一页
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: '信息保存失败'
						})
					}
				})

			},
			bindPickerChange(e) {
				console.log(e)
				this.index = e.detail.value;
				// this.array[this.index].name = e.detail.value
			},
			bindTimeChange(e) {
				this.time = e.detail.value
				console.log(e);
			}
		},
	};
</script>

<style scoped lang="scss">
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.uni-input2 {
		/* width: 40rpx;
		height: 40rpx; */
	}

	.img-wh {
		margin-left: 5rpx;
		width: 24rpx;
		height: 24rpx;
	}

	.uni-input2 image {
		width: 25rpx;
		height: 25rpx;
	}

	.picter {
		display: flex;
		align-items: center;
		height: 100%;
	}

	page {
		background-color: #F6F7F9;
	}

	.page {

		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		background-color: #F6F7F9;
	}

	.group_3 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_2 {
		padding-left: 32rpx;
		padding-right: 30rpx;
		background-color: #ffffffff;
	}

	.button {
		width: 100%;
		position: fixed;
		bottom: 0;
		font-weight: 800;
		left: 0;
		right: 0;
		background-color: #ffffff;

		height: 100rpx;
		line-height: 100rpx;
	}

	.text_14 {
		font-weight: 500;
		height: 100%;
		margin: 0 auto;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_4 {
		padding-top: 19rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_8 {
		padding: 32rpx 0;
	}

	.group_9 {
		border-top: solid 1rpx #eeeeee;
	}

	.group_5 {
		padding: 20rpx 0;
		// border-top: solid 0.5px #eeeeee;
		display: flex;
		align-items: center;
	}

	.group_6 {
		// margin-top: 18rpx;
		padding: 32rpx 0;
		border-top: solid 1rpx #eeeeee;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		width: 100%;
		padding: 32rpx 0;
	}

	.text_8 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_10 {
		padding: 32rpx 0;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_11 {
		padding: 32rpx 0;
	}

	.text_3 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		height: 100%;
	}

	.image_4 {
		filter: drop-shadow(0px 3rpx 2rpx #0000001a);
		width: 88rpx;
		height: 88rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_5 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_6 {
		width: 10%;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 {
		display: flex;
		justify-content: flex-end;
		margin-right: 3rpx;
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 input {
		width: 250rpx;
		text-align: right;
	}

	.text_10 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_11 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_12 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	/deep/.icon-del-box {
		// display: none !important;
		width: 30%;
		height: 30%;

	}

	.image_999 {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}
</style>
